import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import Header from './Header';
import './Dashboard.css';

const Dashboard = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [isLoading, setIsLoading] = useState(true);
  const [stats, setStats] = useState({
    totalPhotos: 0,
    totalAlbums: 0,
    totalSpace: 0,
    recentUploads: []
  });

  // Check for mock authentication
  const isAuthenticated = !!localStorage.getItem('mockAuthToken');
  const user = isAuthenticated ? JSON.parse(localStorage.getItem('mockUser') || '{}') : null;

  useEffect(() => {
    // Simulate loading dashboard data
    setTimeout(() => {
      setStats({
        totalPhotos: 1247,
        totalAlbums: 15,
        totalSpace: 85,
        recentUploads: [
          { id: 1, name: '夏日海滩.jpg', date: '2023-07-15', size: '2.4MB', thumbnail: '🏖️' },
          { id: 2, name: '城市夜景.jpg', date: '2023-07-14', size: '3.1MB', thumbnail: '🌃' },
          { id: 3, name: '家庭聚餐.jpg', date: '2023-07-13', size: '4.2MB', thumbnail: '👨‍👩‍👧‍👦' },
          { id: 4, name: '山间小路.jpg', date: '2023-07-12', size: '2.8MB', thumbnail: '🏞️' },
          { id: 5, name: '生日派对.jpg', date: '2023-07-11', size: '3.5MB', thumbnail: '🎂' }
        ]
      });
      setIsLoading(false);
    }, 1000);
  }, []);

  const handleCardClick = (path) => {
    navigate(path);
  };

  const handlePhotoClick = (photoId) => {
    navigate(`/photo/${photoId}`);
  };

  if (!isAuthenticated) {
    navigate('/auth');
    return null;
  }

  return (
    <div className="dashboard-container">
      <Header />
      <div className="dashboard-content">
        <div className="dashboard-header">
          <h1 className="dashboard-title">
            {t('dashboard.welcome')}, {user?.name}!
          </h1>
          <p className="dashboard-subtitle">
            {t('dashboard.subtitle')}
          </p>
        </div>

        {isLoading ? (
          <div className="dashboard-loading">
            <div className="loading-spinner"></div>
            <p>{t('dashboard.loading')}</p>
          </div>
        ) : (
          <>
            {/* Stats Cards */}
            <div className="stats-grid">
              <div className="stat-card" onClick={() => handleCardClick('/timeline')}>
                <div className="stat-icon">📸</div>
                <div className="stat-info">
                  <h3>{stats.totalPhotos}</h3>
                  <p>{t('dashboard.totalPhotos')}</p>
                </div>
              </div>
              
              <div className="stat-card" onClick={() => handleCardClick('/albums')}>
                <div className="stat-icon">📁</div>
                <div className="stat-info">
                  <h3>{stats.totalAlbums}</h3>
                  <p>{t('dashboard.totalAlbums')}</p>
                </div>
              </div>
              
              <div className="stat-card" onClick={() => handleCardClick('/upload')}>
                <div className="stat-icon">☁️</div>
                <div className="stat-info">
                  <h3>{stats.totalSpace}%</h3>
                  <p>{t('dashboard.storageUsed')}</p>
                </div>
              </div>
              
              <div className="stat-card" onClick={() => handleCardClick('/profile')}>
                <div className="stat-icon">👤</div>
                <div className="stat-info">
                  <h3>{user?.name}</h3>
                  <p>{t('dashboard.profile')}</p>
                </div>
              </div>
            </div>

            {/* Quick Actions */}
            <div className="quick-actions">
              <h2 className="section-title">{t('dashboard.quickActions')}</h2>
              <div className="action-buttons">
                <button 
                  className="action-btn primary"
                  onClick={() => handleCardClick('/upload')}
                >
                  <span className="btn-icon">📤</span>
                  {t('dashboard.uploadPhotos')}
                </button>
                
                <button 
                  className="action-btn secondary"
                  onClick={() => handleCardClick('/albums')}
                >
                  <span className="btn-icon">📁</span>
                  {t('dashboard.createAlbum')}
                </button>
                
                <button 
                  className="action-btn secondary"
                  onClick={() => handleCardClick('/timeline')}
                >
                  <span className="btn-icon">⏰</span>
                  {t('dashboard.viewTimeline')}
                </button>
                
                <button 
                  className="action-btn secondary"
                  onClick={() => handleCardClick('/settings')}
                >
                  <span className="btn-icon">⚙️</span>
                  {t('dashboard.settings')}
                </button>
              </div>
            </div>

            {/* Recent Uploads */}
            <div className="recent-uploads">
              <div className="section-header">
                <h2 className="section-title">{t('dashboard.recentUploads')}</h2>
                <button 
                  className="view-all-btn"
                  onClick={() => handleCardClick('/timeline')}
                >
                  {t('dashboard.viewAll')}
                </button>
              </div>
              
              <div className="photo-grid">
                {stats.recentUploads.map(photo => (
                  <div 
                    key={photo.id} 
                    className="photo-item"
                    onClick={() => handlePhotoClick(photo.id)}
                  >
                    <div className="photo-thumbnail">
                      <span className="photo-emoji">{photo.thumbnail}</span>
                    </div>
                    <div className="photo-info">
                      <h4 className="photo-name">{photo.name}</h4>
                      <p className="photo-date">{photo.date}</p>
                      <p className="photo-size">{photo.size}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Storage Usage */}
            <div className="storage-usage">
              <h2 className="section-title">{t('dashboard.storageUsage')}</h2>
              <div className="storage-bar">
                <div className="storage-progress" style={{ width: `${stats.totalSpace}%` }}></div>
              </div>
              <div className="storage-info">
                <span>{t('dashboard.used')}: {stats.totalSpace}%</span>
                <span>{t('dashboard.available')}: {100 - stats.totalSpace}%</span>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default Dashboard;